<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧普商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1993122_z2zu5zv3et.css">
    <script src="./js/jquery.min.js"></script>
<body>
    <header>
            <div class="h_top">
                <div class="main h_main">
                    <span class="iconfont icon-ziyuan"></span><span class="h_span1"><span>送货地址：</span><span class="h_city">上海</span><i class="iconfont icon-xiala xiala1"></i></span>
                    <ul class="ul1">
                        
                        <li><a href="" class="h_a1"style="color:#000;">HI,请登录</a></li>
                        <li><a href="http://127.0.0.1:56/login.html">免费注册</a></li>
                        <li><a href="">我的订单</a></li>
                        <li><a href="" class="h_a2" id="ul1_a2">个人中心 <i class="iconfont icon-xiala xiala2"></i></a></li>
                        <li><a href="" class="h_a1" id="ul1_a1">手机服务</a></li>
                    </ul>
                </div>
            </div>

            <div class="h_nav">
                <div class="main h_main">
                    <img src="./img/logo.png" alt="">
                    <div class="nav_cen">
                        <input type="text" placeholder="88家装汇" class="nav_input"><span class="iconfont icon-sousuo"></span>
                        <ul>
                            <li>客厅灯</li>
                            <li>卧室灯</li>
                            <li>简灯</li>
                            <li>书房灯</li>
                        </ul>
                    </div>
                    <div class="nav_right">
                        <span class="iconfont icon-gouwuche"></span><span>购物车</span>
                    </div>
                    <div class="main h_main h_mainBox">
                        <div class="box1">
                            <ul class="box1_ul1">
                                <li>A 安徽省  澳门特别行政区</li>
                                <li>B 北京</li>
                                <li>C 重庆</li>
                                <li>D 钓鱼岛</li>
                                <li>F 福建省</li>
                                <li>G 广东省 广西壮族自治区 贵州省 甘肃省</li>
                                <li>H 河北省 黑龙江省 河南省 湖北省 湖南省 海南省</li>
                            </ul>
                            <ul class="box1_ul2">
                                <li>J 江苏省 吉林省 江西省</li>
                                <li>L  辽宁省</li>
                                <li>N 内蒙古自治区 宁夏回族自治区</li>
                                <li>Q 青海省</li>
                                <li>S 山西省 上海 陕西省 山东省 四川省</li>
                                <li>T 天津 台湾</li>
                                <li>X 西藏自治区 新疆维吾尔自治区 香港特别行政区</li>
                                <li>Y 云南省</li>
                                <li>Z 浙江</li>
            
                            </ul>
                        </div>
                        <div class="box2">
                            <ul>
                                <li>待处理订单</li>
                                <li>消息</li>
                                <li>我的收藏</li>
                                <li>我的问答</li>
                                <li>我的消费券</li>
                                <li>售后服务</li>
                            </ul>
                        </div>
                        <div class="box3">
                            <h6>欧普照明商城</h6>
                            <img src="./img/QR_code.png" alt="">
                        </div>
                    </div>
                    <div class="h_bottom">
                        <div class="main h_main">
                            <h2>商品分类</h2>
                            <ul class="h_bottomUl">
                                <a href="http://127.0.0.1:56/home.html"><li>首页</li></a>
                                <li>特价清仓</li>
                                <li>服务中心</li>
                                <li>积分商城</li>
                                <li>灯饰灯具</li>
                                <li>浴霸吊顶</li>
                                <li>开关插座</li>
                                <li>精工卫浴</li>
                                <li>风扇灯</li>
                            </ul> 
                        </div>
                    </div>
                    
                </div>
                
            </div>
           
           <!-- 边上的条 -->
           <div id="gloal-bg">
                <div class="fix-nav">
                    <ul>
                       <li><span class="car"></span>
                           <em class="em em-content1 em1">购物车</em></li>
                       <li><span class="ear"></span>
                        <em class="em em-content2 em1">客服</em></li>
                       <li><span class="code"></span>
                        <em class="em1 em-content"><img src="./img/QR_code.png" alt=""><h2>手机购物更优惠</h2></em></li>
                       <li><span class="phone"></span>
                        <em class="em em-content3 em1">消息</em></li>
                    </ul>
                </div>
                <div class="fix-top">
                    <a href="#"><span class="toTop"></span>
                        <em class=" goTop">返回顶部</em>
                    </a>
                </div>
           </div>
    </header>
    <article>
        <div class="main a_main">
            <div class="banner">
                <div class="bannerLeft">
                    <ul>
                        <li class="navLi"> 客厅灯
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>客厅吸顶灯</h5>
                                        <ul>
                                            <li>省薪套餐</li>
                                            <li>简约客厅灯</li>
                                            <li>时尚装饰客厅灯</li>
                                            <li>璀璨水晶灯</li>
                                        </ul>
                                    </div>
                                    <div class="nav-type">
                                        <h5>客厅吊灯</h5>
                                        <ul>
                                            <li>美式吊灯</li>
                                            <li>欧式吊灯</li>
                                            <li>新锐设计吊灯</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="nav-right">
                                    <div class="nav-type">
                                        <h5>客厅氛围照明</h5>
                                        <ul>
                                            <li>省薪套餐</li>
                                            <li>简约客厅灯</li>
                                            <li>壁灯</li>
                                            <li>灯带</li>
                                            <li>落地灯</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 卧室灯
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>卧室氛围照明</h5>
                                        <ul>
                                            <li>筒射灯</li>
                                            <li>儿童照明</li>
                                            <li>氛围小夜灯</li>
                                            <li>照明灯</li>
                                            <li>落地灯</li>
                                        </ul>
                                    </div>
                                    <div class="nav-type">
                                        <h5>卧室吊灯</h5>
                                        <ul>
                                            <li>美式吊灯</li>
                                            <li>欧式吊灯</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="nav-right">
                                    <div class="nav-type">
                                        <h5>卧室吸顶灯</h5>
                                        <ul>
                                            <li>现代简约</li>
                                            <li>轻奢装饰</li>
                                            <li>儿童房</li>
                                            <li>北欧时尚</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 餐厅灯
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>餐厅吊灯</h5>
                                        <ul>
                                            <li>吊灯光源</li>
                                            <li>欧式吊灯</li>
                                            <li>风扇灯</li>
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li class="navLi"> 筒射灯/灯带
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>客厅吸顶灯</h5>
                                        <ul>
                                            <li>省薪套餐</li>
                                            <li>简约客厅灯</li>
                                            <li>时尚装饰客厅灯</li>
                                            <li>璀璨水晶灯</li>
                                        </ul>
                                    </div>
                                    <div class="nav-type">
                                        <h5>客厅吊灯</h5>
                                        <ul>
                                            <li>美式吊灯</li>
                                            <li>欧式吊灯</li>
                                            <li>新锐设计吊灯</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="nav-right">
                                    <div class="nav-type">
                                        <h5>客厅氛围照明</h5>
                                        <ul>
                                            <li>省薪套餐</li>
                                            <li>简约客厅灯</li>
                                            <li>壁灯</li>
                                            <li>灯带</li>
                                            <li>落地灯</li>
                                        </ul>
                                    </div>
                                    <div class="nav-type">
                                        <h5>投光灯/太阳能灯</h5>
                                        <ul>
                                            <li>投光灯/太阳能灯</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 浴霸/吊顶
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>浴霸/吊顶</h5>
                                        <ul>
                                            <li>风暖浴霸</li>
                                            <li>灯暖浴霸</li>
                                        </ul>
                                    </div>
                                    <div class="nav-type">
                                        <h5>集成吊顶</h5>
                                        <ul>
                                            <li>集成扣板</li>
                                            <li>辅件及配件</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="nav-right">
                                    <div class="nav-type">
                                        <h5>厨卫灯/其他</h5>
                                        <ul>
                                            <li>厨卫灯</li>
                                            <li>镜前灯</li>
                                            <li>壁灯</li>
                                            <li>换气扇</li>
                                            <li>落地灯</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 卫浴/五金
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>卫浴/五金</h5>
                                        <ul>
                                            <li>淋头花洒</li>
                                            <li>浴室挂件</li>
                                            <li>智能马桶</li>
                                            <li>水槽专区</li>
                                            <li>下水软管</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 开关插座
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>经典性价比系列</h5>
                                        <ul>
                                            <li>K05大翘板系列</li>
                                            <li>P06经典系列</li>
                                            <li>K03金色系列</li>
                                        </ul>
                                    </div>
                                    <div class="nav-type">
                                        <h5>时尚美学系列</h5>
                                        <ul>
                                            <li>k12系列</li>
                                            <li>k16系列</li>
                                            <li>k11系列</li>
                                            <li>k13系列</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="nav-right">
                                    <div class="nav-type">
                                        <h5>安全钢架系列</h5>
                                        <ul>
                                            <li>k07系列</li>
                                            <li>k08系列</li>
                                            <li>k09系列</li>
                                        </ul>
                                    </div>
                                    <div class="nav-type">
                                        <h5>电工配件</h5>
                                        <ul>
                                            <li>明装开关</li>
                                            <li>开关底盒</li>
                                            <li>地插</li>
                                            <li>空开漏电保护器</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 台灯/小夜灯
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>台灯/小夜灯</h5>
                                        <ul>
                                            <li>台灯</li>
                                            <li>小夜灯</li>
                                            <li>充电台灯</li>
                                            <li>璀璨水晶灯</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 灯泡/光源
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>灯泡/光源</h5>
                                        <ul>
                                            <li>球泡</li>
                                            <li>大功率灯泡</li>
                                            <li>小功率灯泡</li>
                                            <li>璀璨水晶灯</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 阳台过道
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>阳台过道</h5>
                                        <ul>
                                            <li>阳台</li>
                                            <li>过道</li>
                                            <li>地漏</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="navLi"> 特价清仓
                            <div class="nav-items">
                                <div class="nav-left">
                                    <div class="nav-type">
                                        <h5>特价清仓</h5>
                                        <ul>
                                            <li>特价清仓</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bannerRight">
                    <ul class="bannerUl">
                        <li ><img src="./img/banner1.jpg" alt="" ></li>
                        <li ><img src="./img/banner2.jpg" alt="" ></li>
                        <li ><img src="./img/banner3.jpg" alt="" ></li>
                        <div class="arrowWrap">
                            <img src="./img/l.png" alt="" class="prev">
                            <img src="./img/r.png" alt="" class="next">
                        </div>
                    </ul>
                </div>
            </div>
            <div class="content">
                <a href="http://127.0.0.1:56/list.html" class="ban"><img src="./img/daohang.jpg" alt=""></a>
                <ul class="template">
                    <li><a href="http://127.0.0.1:56/detail.html">
                       <img src="./img/fy1.jpg" alt="">
                       <h2>￥999.00</h2> 
                       <div class="divSpan"><span>特价</span><span>满减</span></div>
                       <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                    </a></li>
                    <li><a href="#">
                        <img src="./img/fy2.jpg" alt="">
                        <h2>￥1299.00</h2> 
                        <div class="divSpan"><span>特价</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy3.jpg" alt="">
                        <h2>￥888.00</h2> 
                        <div class="divSpan"><span>特价</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy1.jpg" alt="">
                        <h2>￥899.00</h2> 
                        <div class="divSpan"><span>特价</span><span>满减</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy3.jpg" alt="">
                        <h2>￥1099.00</h2> 
                        <div class="divSpan"><span>满减</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy2.jpg" alt="">
                        <h2>￥1299.00</h2> 
                        <div class="divSpan"><span>特价</span><span>满减</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy1.jpg" alt="">
                        <h2>￥1399.00</h2> 
                        <div class="divSpan"><span>特价</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy3.jpg" alt="">
                        <h2>￥899.00</h2> 
                        <div class="divSpan"><span>满减</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy1.jpg" alt="">
                        <h2>￥999.00</h2> 
                        <div class="divSpan"><span>特价</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy2.jpg" alt="">
                        <h2>￥1199.00</h2> 
                        <div class="divSpan"><span>特价</span><span>满减</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy1.jpg" alt="">
                        <h2>￥666.00</h2> 
                        <div class="divSpan"><span>特价</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy3.jpg" alt="">
                        <h2>￥1666.00</h2> 
                        <div class="divSpan"><span>特价</span><span>满减</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                     <li><a href="#">
                        <img src="./img/fy1.jpg" alt="">
                        <h2>￥2345.00</h2> 
                        <div class="divSpan"><span>特价</span></div>
                        <p>欧式客厅吊灯 全铜餐厅客厅家用铜灯 多款可选 罗马假日</p>
                     </a></li>
                  
                </ul>
                <img src="./img/fuwu.jpg" alt="">
                <ul class="conUl">
                    <li><img src="./img/anzhuang.jpg" alt=""></li>
                    <li><img src="./img/fahuo.jpg" alt=""></li>
                    <li><img src="./img/fapiao.jpg" alt=""></li>
                    <li><img src="./img/anzhuang.jpg" alt=""></li>
                </ul>
            </div>
        </div>
          
    </article>
    <footer>
        <div class="main f_main">
            <div class="f_box1">
                <div class="f_bo1">
                    <p>扫码快捷购物</p>
                    <img src="./img/QR_code.png" alt="">
                </div>
                <div class="f_bo2">
                    <p>官方商城电话</p>
                    <h4>0512-63828888-5022</h4>
                    <h4>0512-63828888-5333</h4>
                    <p>工作时间</p>
                    <h4>周一到周日 8:00-凌晨1:00</h4>
                </div>
            </div>
            <ul>
                <li>购物指南
                    <h6>购物须知</h6>
                </li>
                <li>支付方式</li>
                <li>配送服务</li>
                <li>售后保障</li>
                <li>关于欧普</li>
            </ul>
            <h5>Copyright © 1996-2017欧普照明股份有限公司版权所有&nbsp;&nbsp;|&nbsp;&nbsp;沪ICP备15024911号-1</h5>
            <div class="f_box2">
                <img src="./img/foot1.png" alt="">
                <img src="./img/foot2.png" alt="">
                <img src="./img/foot3.png" alt="">
            </div>
        </div>
    </footer>


    <script>
        $(".h_span1").mouseenter(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(180deg)",
                transition:"0.5s",
            })
            $(".box1").show()    
        }).mouseleave(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(0deg)",
                transition:"0.5s",
            })
            $(".box1").hide()
        })
 
        $("#ul1_a2").mouseenter(function(){
            $(".box2").show()    
        }).mouseleave(function(){
            $(".box2").hide() 
        })
        $("#ul1_a1").mouseenter(function(){
            $(".box3").slideDown() 
        }).mouseleave(function(){
            $(".box3").hide() 
        })
        $(".bannerLeft .navLi").mouseenter(function(){
            $(this).find($(".nav-items")).show()
        }).mouseleave(function(){
            $(this).find($(".nav-items")).hide()
        })
        // 轮播图
        let n=0;
        let liList=$(".bannerRight li");
        $(".prev ").click(function(){
            n--;
            if(n===-1){
                n=liList.length-1;
            }
            $(".bannerRight .bannerUl").animate({
                marginLeft:-(n*1008)}
            )
                
        })
        $(".next").click(function(){
            n++;
            if(n===liList.length){
                n=0;
            }
            $(".bannerRight .bannerUl").animate({
                marginLeft:-(n*1008)}
            )
        })
        let timer=setInterval(function(){
            n++;
            if(n===liList.length){
                n=0;
            }
            $(".bannerRight .bannerUl").animate({
                marginLeft:-(n*1008)}
            )
            $(".bannerRight img").mouseenter(function(){
            clearInterval(timer);
            })
        },4000)
       
    </script>
</body>
</html>